<template>
	<view style="display: flex;">
		<view class="input_card">
			<button class="input_avatar" type="default" plain="true" hair-line="false" open-type="chooseAvatar"
				@chooseavatar="chooseavatar">
				<image :src="userInfo.image?userInfo.image:'https://bzhl-dev1.oss-cn-chengdu.aliyuncs.com/bzhl/miniapp/yst/user.png'" mode="" style="border-radius: 50%;"></image>
				<text>点击修改头像</text>
			</button>
			<view class="input-u">
				<text class="input-u-t">姓名</text>
				<u-input v-model="userInfo.nickName" type="text" placeholder="请输入姓名" placeholder-style="font-size: 26rpx"
					:custom-style="uInputCustomStyle" border="false" @blur="changeInfo"/>
			</view>
			<view class="input-u" style="align-items: baseline;">
				<text class="input-u-t">性别</text>
					 <u-radio-group
					    v-model="userInfo.sex"
					    placement="row"
					  >
					    <u-radio
						  activeColor="#00B4C7"
					      :customStyle="{marginBottom: '8px'}"
					      v-for="(item, index) in sexRadio"
					      :key="index"
					      :label="item.name"
					      :name="item.value"
					      @change="changeSex"
					    >
					    </u-radio>
					  </u-radio-group>
			</view>
			<view class="input-u">
				<text class="input-u-t">手机号码</text>
				<u-input v-model="userInfo.phoneMobile" :type="text" placeholder="请输入手机号码" @blur="changePhone" maxlength="11"
					placeholder-style="font-size: 26rpx" :custom-style="uInputCustomStyle" border="false" />
			</view>
			<view class="input-u" v-if="ylUserInfo.type == '1'">
				<text class="input-u-t">职称</text>
				<u-input v-model="userInfo.jobTitle" :type="text" placeholder="请输入职称" @blur="changeInfo"
					placeholder-style="font-size: 26rpx" :custom-style="uInputCustomStyle" border="false" />
			</view>
			<view class="input-u" v-if="ylUserInfo.type == '1'">
				<text class="input-u-t">所属医院</text>
				<u-input v-model="userInfo.hospital" :type="text" placeholder="请输入所属医院" @blur="changeInfo"
					placeholder-style="font-size: 26rpx" :custom-style="uInputCustomStyle" border="false" />
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import{
		submitMaterialsApi
	} from '../../common/API/ossApi.js'
	import {
		sendSms,
		createCaptcha,
		getUserApi
	} from '../../common/API/loginOrregister.js'
	import{
		editUserInfoApi
	}from '../../common/API/userInfoApi.js'
	export default {
		data() {
			return {
				userInfo: {},
				sexRadio: [
					{
						name: '男',
						value: '0'
					},
					{
						name: '女',
						value: '1'
					}
				]
			}
		},
		computed: {
			...mapState('user', ['ylUserInfo'])
		},
		methods: {
			...mapMutations('user', ['MusetToken','MusetUserInfo']),
			// 修改头像
			async chooseavatar(e) {
				this.userInfo.avatar = e.detail.avatarUrl
				// 获取oss签名
				const res = await submitMaterialsApi()
				this.action = res.data.host
				const Num = res.data.dir + Date.now() + '.' + this.userInfo.avatar
				this.formData = {
					'key': Num,
					'policy': res.data.policy,
					'OSSAccessKeyId': res.data.accessKeyId,
					'signature': res.data.signature
				}
				// 上传到oss
				wx.uploadFile({
					url: this.action,
					filePath: this.userInfo.avatar,
					name: 'file', // 必须填file。
					formData: this.formData,
					success: async (res1) => {
						if (res1.statusCode === 204) {
							const pictureUrl = res.data.host + '/' + Num
							console.log('上传成功', pictureUrl);
							this.userInfo.image = pictureUrl
							this.userInfo.id = this.userInfo.userId
							this.changeInfo()
						}
					},
					fail: err => {
						uni.$showMsg('上传图片失败')
					}
				});

			},
			
			changeSex(e) {
				// console.log(e)
				this.userInfo.gender = e
				this.changeInfo()
			},
			changePhone(e) {
				// console.log(e)
				this.userInfo.phone = e
				this.changeInfo()
			},
			// 修改个人信息
			async changeInfo() {
				// console.log(this.userInfo.sex,'this.userInfo')
				const res = await editUserInfoApi(this.userInfo)
			},
			async getUserInfo(){
				const res = await getUserApi()
				// console.log('用户信息',JSON.stringify(res))
				this.userInfo = res.data
				this.userInfo.id = res.data.userId
				this.MusetUserInfo(res.data)
			}
			
		},
		onLoad() {
			this.getUserInfo()
		}
	}
</script>

<style lang="scss" scoped>
	.input-u-t {
		padding-top: 30rpx;
		font-size: 30rpx;
		width: 150rpx;
	}

	.input-u {
		height: 100rpx;
		border-bottom-style: solid;
		border-bottom-width: thin;
		border-bottom-color: #F8F8F8;
		padding-top: 10rpx;
		/* padding-right: 160rpx; */
		display: flex;
		justify-content: left;
		width: 90%;
		margin-left: 32rpx;
		font-size: 28rpx;
		/deep/.u-radio{
			margin-right: 100rpx;
		}
	}

	.input_card {
		background-color: #FFFFFF;
		// height: 825rpx;
		width: 686rpx;
		margin: 32rpx;
		border-radius: 12rpx;
		padding-bottom: 20rpx;
	}

	.input_avatar {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 32rpx;
		margin-bottom: 32rpx;
		border-style: hidden !important;
		width: 200rpx;

		image {
			width: 120rpx;
			height: 120rpx;
		}

		text {
			color: #CCCCCC;
			font-size: 24rpx;
			margin-top: 10rpx;
		}
	}
</style>